<template>
    <h1>{{ title }}</h1>
    <button @click="handleClick">显示/隐藏</button>
    <com v-if="flag" :flag="flag"></com>
    <component :is="ComponentsName"></component>
</template>

<script lang="ts">
import com from "./com.vue";
import parent from "./parent.vue";
import { useRoute } from "vue-router";
import { ref } from "vue";

export default {
    name: "setup-index",
    components: {
        com,
    },
    setup(props, context) {
        // props 和 context 都是响应式的
        // props 要在 props:[] 里声明
        // setup 中没有 this，可以通过 context 访问
        console.log("setup", props, context);

        const route = useRoute();

        const title = ref("setup");

        if (route.meta && route.meta.title) {
            title.value = route.meta.title as string;
        }

        const flag = ref(true);

        function handleClick() {
            flag.value = !flag.value;
        }

        return {
            ComponentsName: parent,
            title,
            flag,
            handleClick,
        };
    },
};
</script>

<style scoped></style>
